<style>
    .img-wrap {
        width: 140px;
        height: 90px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        background: #f8f8f8;
    }
    
    .img-wrap img {
        width: 100%;
        height: 100%;
    }
    
    .img-wrap span {
        font-size: 30px;
        line-height: 80px;
        color: #eee;
    }
</style>

<div class="widget-head" style="margin-top:0;">
    <div class="widget-title">本地学校设置</div>
</div>
<div class="layui-container" style="width:100%;">
    <form class="layui-form" action="/admin/config/edit_post">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">基础</li>
                <li>SEO设置</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show" style="padding-top:30px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">学校名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="config[name]" value="{$info.config.name}" placeholder="请输入学校名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">省市区</label>
                        <div class="layui-input-block" style="width:400px">
                            <input type="text" autocomplete="on" class="layui-input" id="city-picker" name="city-picker" readonly="readonly" data-toggle="city-picker" placeholder="请选择">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">详细地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="config[address]" value="{$info.config.address}" placeholder="请输入详细地址" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 待开发!!! -->
                    <!-- <div class="layui-form-item">
                        <label class="layui-form-label">地图</label>
                        <div class="layui-input-block"></div>
                    </div> -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系方式</label>
                        <div class="layui-input-block">
                            <input type="text" name="config[contact]" value="{$info.config.contact}" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">Logo</label>
                        <div class="layui-input-block">
                            <input id="logo" type="text" name="config[logoimg]" value="{$info.config.logoimg}" placeholder="请上传Logo图片" autocomplete="off" class="layui-input" style="display: inline-block;">
                            <a href="javascript:;" id="logoupload" class="layui-btn">上传图片</a>
                            <div id="logo-box" class="img-wrap">
                                <span>Logo</span>
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备案号</label>
                        <div class="layui-input-block">
                            <input type="text" name="config[ba_number]" value="{$info.config.ba_number}" placeholder="请输入备案号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备案链接</label>
                        <div class="layui-input-block">
                            <input type="text" name="config[ba_link]" value="{$info.config.ba_link}" placeholder="请输入备案链接" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-tab-item" style="padding-top:30px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">SEO标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="config[seo_title]" value="{$info.config.seo_title}" placeholder="请输入标题" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">SEO关键词</label>
                        <div class="layui-input-block">
                            <input type="text" name="config[seo_keywords]" value="{$info.config.seo_keywords}" placeholder="请输入关键词" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">SEO描述</label>
                        <div class="layui-input-block">
                            <textarea name="config[seo_desc]" placeholder="请输入简介" class="layui-textarea">{$info.config.seo_desc}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="layui-form-item">
            <label class="layui-form-label">学校名称</label>
            <div class="layui-input-block">
                <input type="text" name="config[school_name]" value="{$info.config.school_name}" placeholder="请输入学校名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">学校简介</label>
            <div class="layui-input-block">
                <textarea name="config[school_desc]" placeholder="请输入学校简介" class="layui-textarea">{$info.config.school_desc}</textarea>
            </div>
        </div> -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" name="name" value="本地学校配置">
                <input type="hidden" name="key" value="{$info.key}">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="/Public/js/city-picker.data.js"></script>
<script>
    layui.use(['element', 'jquery', 'think', 'citypicker', 'upload', 'layer', 'table', 'index'], function() {
        var $ = layui.jquery,
            cityPicker = layui.citypicker;

        //省市区列表
        var currentPicker = new cityPicker("#city-picker", {
            provincename: "provinceId",
            cityname: "cityId",
            districtname: "districtId",
            level: 'districtId', // 级别
        });
        currentPicker.setValue('{$info.config.prov}/{$info.config.city}/{$info.config.area}');

        //图片上传
        var upload = layui.upload,
            layer = layui.layer;

        layui.upload.render({
            url: '/api/upload/qiniu?type=image',
            elem: '#logoupload',
            ext: 'jpg|png|gif|bmp|jpeg',
            method: 'post',
            before: function() {
                ii = layer.msg('图片上传中...', {
                    icon: 16,
                    time: 10000
                });
            },
            done: function(ret) {
                if (ret.status) {
                    change_logo(ret.data.url);
                    layer.close(ii);
                } else {
                    layer.alert(ret.info);
                }
            }
        });

        if ($('#logo').val() != "") {
            change_logo($('#logo').val());
        }

        function change_logo(url) {
            $('#logo').val(url);
            $('#logo-box').html('<img src="' + url + '">');
            $('#logo-box').unbind('click').click(function() {
                var $this = $(this);
                //调用示例
                layer.photos({
                    photos: '#logo-box',
                    anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });
            });
        }

    });
</script>